import React from 'react';
import DataService from './DataService.js';
import UserUnknowStateComponent from './UserUnknowStateComponent.js';
import UserUnLoginStateComponent from './UserUnLoginStateComponent.js';
import UserLoginedStateComponent  from './UserLoginedStateComponent.js';


class ConditionalRendering extends React.Component{

	constructor(props){
		super(props);
		this.state={
			user :{}
		}
		this.chanageStateHandler= this.chanageState.bind(this);
	}

    componentDidMount(){
    	this.readUser();
    }

	readUser(){
		this.setState((state,props)=> {
			let userValue =  DataService.getInstance().getUserService().getUserById(1001);
			console.log("user.status="+userValue);
			return {
				user :userValue
			};
		});
	}

	chanageState(flag){
		if(flag ===1){
			DataService.getInstance().getUserService().setUserStateUnlogin(1001);
		}else if(flag ===2 ){
			DataService.getInstance().getUserService().setUserStateLogined(1001);
		}
		
		console.log('flag='+flag);
		this.readUser();
	}
	showStatus(){
		let statusComponent  ;
		if(!this.state.user.status){
			statusComponent = (<UserUnknowStateComponent/>);
		}else if(this.state.user.isUnlogin()){
				statusComponent =(
						<div>
							<UserUnLoginStateComponent/>
						</div>
					)
		}else if( this.state.user.isLogined() ){
			  	statusComponent =(<UserLoginedStateComponent user={this.state.user}/>);
		}
		return statusComponent;
	}

	render(){
		return (
				<div>
					<div>
						<h3>条件改变</h3>
						<button>未知</button>
						<button key='1' onClick={(e) => this.chanageStateHandler(1)}>未登录</button>
						<button key='2' onClick={(e) => this.chanageStateHandler(2)}>已登录</button>
					</div>
					<div>
						{this.showStatus()}
					</div>
				</div>
			);
	}
}
export default ConditionalRendering;